<template>
	<Layout :showBack="false" :innerBottom="false">
		<template #title>登录</template>
		<view class="iflex column fill aic logo">
			<image class="logo__image" src="/static/image/common/logo.png"></image>
			<text class="logo__text">咕法网</text>
		</view>

		<view class="iflex column asc login-form">
			<uni-forms ref="formRef" :model="formData" :rules="rules">
				<uni-forms-item name="username">
					<uni-easyinput v-model="formData.username" class="login-form__input" placeholder="请输入账号"
						:clearable="false" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item name="password" style="margin-top: 50rpx;">
					<uni-easyinput v-model="formData.password" class="login-form__input" type="password"
						placeholder="请输入密码" :clearable="false" :inputBorder="false" primaryColor="#FF710A" />
				</uni-forms-item>
			</uni-forms>
			<view class="iflex column fill aic login-form__footer">
				<u-button style="{width:100%}" :custom-style="{width:'620rpx'}" type="primary" size="large"
					@click.stop="tapSubmit">登录</u-button>
				<text class="register-button" @click.stop="tapToRegister">账号申请</text>
			</view>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { login, getOpenId, getLawByWxUserId } from '@/apis/auth';
	import { useAuthStore } from '@/stores';
	import { wxLogin } from '@/utils/wx.api';

	const authStore = useAuthStore();
	const formRef = ref();
	const formData = ref({
		username: '13999999999',
		password: '123456'
	});
	const rules = ref({
		username: {
			rules: [
				{ required: true, errorMessage: '请填写账号' },
				{
					minLength: 1,
					maxLength: 20,
					errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		password: {
			rules: [
				{ required: true, errorMessage: '请填写密码' },
				{
					minLength: 1,
					maxLength: 30,
					errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		}
	})

	function tapSubmit() {
		formRef.value.validate().then(async (res) => {
			// const wxLoginCode = await wxLogin();
			// console.log('wxLoginCode', wxLoginCode);
			// const openIdResult = await getOpenId(wxLoginCode);
			// if (openIdResult.code !== 200) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: openIdResult.msg ?? '服务器忙，请稍后再试'
			// 	});
			// 	return;
			// }
			// const openId = openIdResult.data as string;
			login({ ...formData.value, openId: '1' }).then(async (result) => {
				console.log('result', result);
				if (result.code !== 200) {
					uni.showToast({
						icon: 'none',
						title: result.msg ?? '服务器忙，请稍后再试'
					})
					return;
				}
				authStore.setProfile(result.data);
				const lawResult = await getLawByWxUserId();
				authStore.setLaw(lawResult.data);
				uni.showToast({
					icon: 'success',
					title: '登录成功',
					duration: 1500
				});
				setTimeout(() => {
					uni.navigateBack({
						fail: () => {
							uni.switchTab({
								url: '/pages/mine/mine'
							});
						}
					})
				}, 1500);
			});
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}

	function tapToRegister() {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}
</script>

<style lang="scss">
	.logo {
		margin-top: 106rpx;

		&__image {
			width: 160rpx;
			height: 159rpx;
		}

		&__text {
			margin-top: 30rpx;
			color: #000000;
			font-size: 44rpx;
			font-weight: 500;
		}
	}

	.login-form {
		width: 620rpx;
		margin-top: 145rpx;

		&__input {

			:deep(.uni-easyinput__content) {
				border-radius: 6rpx !important;
				background-color: #E9E9E9 !important;

				.uni-easyinput__content-input {
					height: 92rpx !important;
					border-radius: 6rpx !important;
					padding: 0 30rpx;
					background-color: #E9E9E9;
				}
			}
		}

		&__footer {
			margin-top: 56rpx;

			.register-button {
				margin-top: 40rpx;
				color: #414141;
				font-size: 32rpx;
				font-weight: 400;
			}
		}
	}
</style>